<template>
    <div>
        <div class="record">
            <div>
                <el-icon>
                    <Tickets />
                </el-icon>数据列表
            </div>
            <div>
                <el-button @click="addFn">添加</el-button>
            </div>
        </div>
    </div>
    <div class="table">
        <el-table border :data="data.list">
            <el-table-column prop="id" label="编号" />
            <el-table-column label="商品名称">
                <template #default="scope">
                    {{ scope.row.product.name }}
                </template>
            </el-table-column>
            <el-table-column label="货号">
                <template #default="scope">
                    {{ "NO." + scope.row.product.productSn }}
                </template>
            </el-table-column>
            <el-table-column label="商品价格">
                <template #default="scope">
                    {{ scope.row.product.price }}
                </template>
            </el-table-column>
            <el-table-column label="剩余数量">
                <template #default="scope">
                    {{ scope.row.product.stock }}
                </template>
            </el-table-column>
            <el-table-column prop="flashPromotionPrice" label="秒杀价格" />
            <el-table-column prop="flashPromotionCount" label="限购数量" />
            <el-table-column prop="sort" label="排序" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary">编辑</el-button>
                    <el-button link type="primary">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>

    <el-dialog v-model="show" title="选择商品">
        <div>
            <div class="input">
                <el-input v-model="pro.page.keyword" placeholder="商品名称搜索" class="input-with-select">
                    <template #append>
                        <el-button @click="searchFn" :icon="Search" />
                    </template>
                </el-input>
            </div>
            <div>
                <el-table ref="multipleTableRef" :data="pro.list" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" property="status" />
                    <el-table-column label="商品名称" property="name" />
                    <el-table-column label="货号">
                        <template #default="scope">
                            {{ "NO." + scope.row.productSn }}
                        </template>
                    </el-table-column>
                    <el-table-column label="价格">
                        <template #default="scope">
                            {{ "￥" + scope.row.price }}
                        </template>
                    </el-table-column>
                </el-table>
                <div>
                    <el-pagination v-model:current-page="pro.page.pageNum" @current-change="changePageNum"
                        v-model:page-size="pro.page.pageSize" layout="prev, pager, next" :background="background"
                        :total="pro.total" />
                </div>

            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button>取消</el-button>
                <el-button type="primary" @click="isSure">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { Tickets, Search, } from "@element-plus/icons-vue"
import { user } from "@/api"
import { useRoute } from "vue-router"
import { reactive, ref } from "vue";
const route = useRoute()
const show = ref(false)

const background = ref(true)

const pro = reactive<{ list: IProductList[], page: user, total: number, relationList: IAddList[] }>({
    list: [],
    page: {
        keyword: "",
        pageNum: 1,
        pageSize: 5

    },
    total: 0,
    relationList: []
})
// 选项--->确定添加
const handleSelectionChange = (val: IProductList[]) => {
    // multipleSelection.value = val
    console.log(val);
    val.forEach(item => {
        console.log(item);

        let obj = {
            flashPromotionId: item.productCategoryId.toString(),
            flashPromotionSessionId: item.brandId.toString(),
            productId: item.id
        }
        pro.relationList.push(obj)
    })
    console.log(pro.relationList);

}
const isSure = () => {
    user.flashProductRelationCreate(pro.relationList).then(res => {

        getlist()
        show.value = false
    })

}

// 分页请求数据


// 定义请求的数据
const state = ({
    flashPromotionId: Number(route.query.flashPromotionId),
    flashPromotionSessionId: Number(route.query.flashPromotionSessionId),
    pageNum: 1,
    pageSize: 5
})
// 定义渲染的数据
const data = reactive<{ list: IFlashProductRelationList[] }>({
    list: []
})
user.flashProductRelationApi(state).then(res => {
    data.list = res.data.list

})

// 添加

const getlist = () => {
    user.productList(pro.page).then(res => {
        if (res.code == 200) {
            pro.list = res.data.list
            pro.total = res.data.total
        }
    })
}

const addFn = () => {
    show.value = true
    getlist()
}
// 分页
const changePageNum = () => {
    getlist()
}
// 搜索
const searchFn = () => {
    getlist()
}



</script>

<style scoped>
.record {
    border: 1px solid #c0c4d1;
    margin-top: 20px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    color: black;
}

.input {
    width: 250px;
}
</style>